<template>
  <div>
    <el-page-header @back="goBack"> </el-page-header>

    <el-card style="min-width: 1200px">
      <div class="createWebhooks">
        <img src="@/assets/imgs/setting/add.png" class="img" />
        <div>
          <div class="title">添加Webhooks</div>
          <div class="hint">Webhooks接收URL选择通知事件</div>
          <div class="alert">
            <i class="el-icon-warning"></i>
            <span>建议添加后，对Webhooks通知延迟以及重发情况进行测试。</span>
          </div>
          <div class="url">选择网络协议并填写URL</div>
          <el-select v-model="prefix" placeholder="请选择">
            <el-option label="http://" value="http"></el-option>
            <el-option label="https://" value="https"></el-option>
          </el-select>
          <el-input
            placeholder="请输入内容"
            v-model="url"
            style="margin-left: 20px; width: 700px"
          >
          </el-input>
          <div class="send">
            当Yuncnpay接收商户服务器返回的响应状态码HttpStatus为2XX，Yuncnpay会认为通知成功。否则会进入重试机制。
          </div>
          <!-- <div class="send">您的地址会收到一条来自 云尘付 的测试消息，请返回以“yuncnpay”开头的任意字符串即可。</div> -->
          <div>
            <el-button class="width120" @click="goBack">取消</el-button>
            <el-button type="primary" class="width120" @click="next"
              >下一步</el-button
            >
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import base64 from "@/utils/code";

export default {
  name: "settingAddWebhooks",
  data() {
    return {
      prefix: "http",
      url: "",
    };
  },
  methods: {
    goBack() {
      this.$backTo(`/setting/webhooks`);
    },
    next() {
      const url = this.prefix + "://" + this.url;
      this.$http
        .post("/api/webhooks/urlTest", {
          url: url,
        })
        .then((res) => {
          if (res.code === "0000") {
            this.$router.push({
              name: "settingWebhooksEdit",
              query: {
                item: base64.encode(
                  JSON.stringify({
                    notifyUrl: this.url,
                    urlAgreement: this.prefix,
                  })
                ),
              },
            });
          }
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.createWebhooks {
  display: flex;
  padding: 20px;
  .img {
    width: 86px;
    height: 86px;
    margin-right: 40px;
  }
  .title {
    font-size: 20px;
    font-weight: 600;
    color: #4f595f;
    margin-bottom: 5px;
  }
  .hint {
    color: #869daa;
  }
  .alert {
    width: 593px;
    height: 42px;
    background: #fff9f9;
    border-radius: 6px;
    border: 1px solid #f7d8d8;
    color: #fc8f90;
    line-height: 42px;
    margin-top: 32px;
    .el-icon-warning {
      margin: 0 20px;
      font-size: 14px;
    }
  }
  .url {
    font-weight: 500;
    color: #666666;
    line-height: 68px;
    font-size: 16px;
    margin-top: 50px;
  }
  .send {
    color: #25b5d9;
    font-weight: 400;
    margin: 20px 0 100px 138px;
  }
}
:deep(.el-select) {
  .el-input__inner {
    width: 118px;
    border: none;
    background: #e5f8f9;
    color: #869daa;
  }
  .el-icon-arrow-up {
    &::before {
      content: "\e78f";
      color: #889fab;
    }
  }
}
</style>
